<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>筛选结果</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <link href="css/base.css" rel="stylesheet" type="text/css" />
    <link href="css/button.css" rel="stylesheet" type="text/css" />
    <link href="css/icon.css" rel="stylesheet" type="text/css" />
    <link href="css/result.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <ul class="search-bar yellow">
        <li class="search-bar-item"><a href="#layer-1">区域</a></li>
        <li class="search-bar-item"><a href="#layer-2">价格</a></li>
        <li class="search-bar-item"><a href="#layer-3">方式</a></li>
        <li class="search-bar-item"><a href="#layer-4">更多</a></li>
    </ul>
    <div class="header-padding"></div>
    <div class="container">
        <div class="card">
            <a href="house.html">
                <div class="card-head">
                    <img class="card-media" src="image/goods-house.png" />
                    <div class="card-head-title">￥1000/月</div>
                    <div class="card-head-mask"></div>
                </div>
                <div class="card-body">
                    <span class="card-body-title">时代金科名苑</span>
                    <label class="red">主卧</label>
                    <label class="orange">带阳台</label>
                    <label class="yellow">带卫生间</label>
                    <label class="gray">带空调</label>
                    <label class="blue">地铁</label>
                    <ul class="card-body-content">
                        <li>高新区</li>
                        <li>5室2厅</li>
                        <li>12m</li>
                        <li class="last">3间在租</li>
                    </ul>
                    <div class="divider"></div>
                </div>
            </a>
        </div>
        <div class="card">
            <a href="house.html">
                <div class="card-head">
                    <img class="card-media" src="image/goods-house.png" />
                    <div class="card-head-title">￥1000/月</div>
                    <div class="card-head-mask"></div>
                </div>
                <div class="card-body">
                    <span class="card-body-title">时代金科名苑</span>
                    <label class="red">主卧</label>
                    <label class="orange">带阳台</label>
                    <label class="yellow">带卫生间</label>
                    <label class="gray">带空调</label>
                    <label class="blue">地铁</label>
                    <ul class="card-body-content">
                        <li>高新区</li>
                        <li>5室2厅</li>
                        <li>12m</li>
                        <li class="last">3间在租</li>
                    </ul>
                </div>
            </a>
        </div>
    </div>
    <div class="footer-padding"></div>
    <ul class="bottom-bar">
        <li class="bottom-bar-item">
            <a class="active" href="javascript:;">
                <i class="icon icon-home"></i>
                <span class="item-title">小家</span>
            </a>
        </li>
        <li class="bottom-bar-item">
            <a href="message.html">
                <i class="icon icon-message"></i>
                <span class="item-title">消息</span>
            </a>
        </li>
        <li class="bottom-bar-item">
            <a href="person.html">
                <i class="icon icon-person"></i>
                <span class="item-title">Honey</span>
            </a>
        </li>
    </ul>
    <div class="layer">
        <div id="layer-1" class="layer-item">
            <ul class="left-side-menu gray">
                <li><a href="javascript:;">附近</a></li>
                <li><a href="javascript:;">附近</a></li>
                <li><a href="javascript:;">附近</a></li>
                <li><a href="javascript:;">附近</a></li>
                <li><a href="javascript:;">附近</a></li>
                <li><a href="javascript:;">附近</a></li>
                <li><a href="javascript:;">附近</a></li>
                <li><a href="javascript:;">附近</a></li>
                <li><a href="javascript:;">附近</a></li>
                <li><a href="javascript:;">附近</a></li>
                <li><a href="javascript:;">附近</a></li>
                <li><a href="javascript:;">附近</a></li>
            </ul>
            <ul class="right-side-menu">
                <li><a href="javascript:;">1km</a></li>
                <li><a href="javascript:;">2km</a></li>
                <li><a href="javascript:;">3km</a></li>
                <li><a href="javascript:;">4km</a></li>
                <li><a href="javascript:;">1km</a></li>
                <li><a href="javascript:;">2km</a></li>
                <li><a href="javascript:;">3km</a></li>
                <li><a href="javascript:;">4km</a></li>
                <li><a href="javascript:;">1km</a></li>
                <li><a href="javascript:;">2km</a></li>
                <li><a href="javascript:;">3km</a></li>
                <li><a href="javascript:;">4km</a></li>
            </ul>
        </div>
        <div id="layer-2" class="layer-item">
            <ul class="center-side-menu">
                <li><a href="javascript:;">附近</a></li>
                <li><a href="javascript:;">附近</a></li>
                <li><a href="javascript:;">附近</a></li>
                <li><a href="javascript:;">附近</a></li>
                <li><a href="javascript:;">附近</a></li>
                <li><a href="javascript:;">附近</a></li>
                <li><a href="javascript:;">附近</a></li>
                <li><a href="javascript:;">附近</a></li>
                <li><a href="javascript:;">附近</a></li>
                <li><a href="javascript:;">附近</a></li>
                <li><a href="javascript:;">附近</a></li>
                <li><a href="javascript:;">附近</a></li>
            </ul>
        </div>
        <div id="layer-3" class="layer-item">
            <ul class="center-side-menu">
                <li><a href="javascript:;">附近</a></li>
                <li><a href="javascript:;">附近</a></li>
                <li><a href="javascript:;">附近</a></li>
                <li><a href="javascript:;">附近</a></li>
                <li><a href="javascript:;">附近</a></li>
                <li><a href="javascript:;">附近</a></li>
                <li><a href="javascript:;">附近</a></li>
                <li><a href="javascript:;">附近</a></li>
                <li><a href="javascript:;">附近</a></li>
                <li><a href="javascript:;">附近</a></li>
                <li><a href="javascript:;">附近</a></li>
                <li><a href="javascript:;">附近</a></li>
            </ul>
        </div>
        <div id="layer-4" class="layer-item">
            <dl>
                <dt>入住时间：</dt>
                <dd><a class="active" href="javascript:;">不限</a></dd>
                <dd><a href="javascript:;">附近</a></dd>
                <dd><a href="javascript:;">附近</a></dd>
                <dd><a href="javascript:;">附近</a></dd>
            </dl>
            <dl>
                <dt>入住时间：</dt>
                <dd><a href="javascript:;">不限</a></dd>
                <dd><a href="javascript:;">附近</a></dd>
                <dd><a href="javascript:;">附近</a></dd>
            </dl>
            <button class="btn yellow">Honey, Go !</button>
        </div>
    </div>
    <div class="layer-mask"></div>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>
    <script src="js/template.js" type="text/javascript"></script>
    <script src="js/jquery.simpleslider.package.min.js" type="text/javascript"></script>
    <script src="js/base.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            bee.wxConfig(function() {
                bee.hideAllNonBaseMenuItem();
            }, function(res) {});

            var height = $('.slide img').height();
            $('.slider-container').height(height);
            $(".slider").simpleSlider();
            $('body').on('click', '.search-bar .search-bar-item a', function() {
                var obj = $(this).attr('href');
                $(obj).siblings().removeClass('active');
                $(obj).addClass('active');
                $('.search-bar .search-bar-item a').addClass('disabled');
                $(this).removeClass('disabled');
                $('.layer, .layer-mask').show();
                $('body').css('overflow', 'hidden');
            });
            $('body').on('click', '.layer-mask', function() {
                $('.layer, .layer-mask').hide();
                $('body').css('overflow', 'visible');
                $('.search-bar .search-bar-item a').removeClass('disabled');
            });
        });
    </script>
</body>

</html>
